<template>
<div class="">
  <el-dialog title="关联用户" :visible.sync="showDialog" width="1000px" center>
    <el-table
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="address"  width="200" label="地址"></el-table-column>
      <el-table-column prop="address_info" label="详细地址"></el-table-column>
      <el-table-column prop="user_name" label="姓名"></el-table-column>
      <el-table-column prop="mobile" width="120" label="手机号"></el-table-column>
      <el-table-column prop="lng" label="经度"></el-table-column>
      <el-table-column prop="lat" label="纬度"></el-table-column>
      <el-table-column label="操作" min-width="120">
        <template slot-scope="scope">
          <div class="table-operate">
            <lb-button
                size="mini"
                plain
                type="primary"
                @click="toShowDialog(scope.row.id)"
                v-hasPermi="`${$route.name}-edit`"
            >{{ $t('action.edit') }}
            </lb-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <lb-page
        :slot="false"
        :batch="false"
        :page="searchForm.page"
        :pageSize="searchForm.limit"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
    >
    </lb-page>
    <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
        </span>
  </el-dialog>
</div>
</template>

<script>
import moment from 'moment'

export default {
  props: {

  },
  data() {
    return {
      loading: false,
      searchForm: {
        page: 1,
        limit: 10
      },
      tableData: [],
      total: 0,
      showDialog: false,
      dialogTitle: true,
      subForm: {
        id: 0,
        user_name: '',
        mobile: 0,
        lng: 0,
        lat: 0,
        address: 0,
        address_info: 0,
      },
      subFormRules: {
        user_name: {required: true, validator: this.$reg.isNotNull, text: '姓名', reg_type: 2, trigger: 'blur'},
        mobile: {required: true, validator: this.$reg.isTel, text: '手机号', reg_type: 2, trigger: 'blur'},
        address: {required: true, validator: this.$reg.isNotNull, text: '地址', reg_type: 2, trigger: 'blur'},
        address_info: {required: true, validator: this.$reg.isNotNull, text: '详细地址', reg_type: 2, trigger: 'blur'},
      },
      currentRow: {}
    }
  },
  mounted() {
    this.getTableDataList()
  },
  methods: {
    handleSelectionChange(val) {
      if(val.length > 1){
        this.$message.error(`请选择一个地址`)
        return
      }
      val = val[0];
      this.currentRow = val
    },
    handleDialogConfirm() {
      if (this.currentRow === null || !this.currentRow.id) {
        this.$message.error(`请选择地址`)
        return
      }
      this.$emit('confirm',this.currentRow)
      this.showDialog = false
    },
    getLatLng(latLng) {
      this.subForm.lat = latLng.lat
      this.subForm.lng = latLng.lng
    },
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getTableDataList()
    },
    async toShowDialog(id = 0) {
      let item = {
        id,
        title: '',
        cover: [],
        top: 0
      }
      if (id) {
        let {data} = await this.$api.address.getAdminMapInfo({id})
        item = data
      }
      for (let key in this.subForm) {
        this.subForm[key] = item[key]
      }
      this.showDialog = true
    },
    async getTableDataList(flag) {
      if (flag) this.searchForm.page = 1
      this.tableData = []
      this.loading = true
      let {searchForm} = this
      let {code, data} = await this.$api.address.getAdminMapList(searchForm)
      this.loading = false
      if (code !== 200) return
      this.tableData = data.data
      this.total = data.total
    },
    confirmDel(id, status) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.updateItem(id, status)
      }).catch(() => {

      })
    },
    async updateItem(id, status) {
      this.$api.mall.carteStatus({id, status}).then(res => {
        if (res.code === 200) {
          this.$message.success(this.$t(status === -1 ? 'tips.successDel' : 'tips.successOper'))
          if (status === -1) {
            this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
            this.getTableDataList()
          }
        } else {
          if (status === -1) return
          this.getTableDataList()
        }
      })
    },
    async submitFormInfo() {
      let flag = true
      this.$refs['subForm'].validate(valid => {
        if (!valid) flag = false
      })
      if (flag) {
        this.subForm.sort = this.subForm.sort || 0
        let {code} = await this.$api.address.addMap(this.subForm)
        if (code !== 200) return
        this.$message.success(this.$t('tips.successSub'))
        this.showDialog = false
        await this.getTableDataList()
      }
    }
  },
  filters: {
    handleTime(val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-form {
  .el-input,
  .el-select,
  .el-input-number {
    width: 300px;
  }
}
</style>
